<template>
  <div>
    <div class="title-header">
      <div class="line"></div>
      <h3>出库作业流</h3>
    </div>
    <el-row slot="search"
            class="out-house-slow">
      <div class="out-house">
        <div class="out-start"></div>
        <span class="out-jt"><i class="iconfont">&#xe7cf;</i></span>
        <div class="out-first">
          <p class="out-add"
             @click="addDialogTableVisible = true"><i class="iconfont">&#xe621;</i></p>
          <p class="out-edit-box"><img src="@/assets/img/outedit.png" /></p>
          <p class="out-title">提单管理</p>
          <p>提单开票：<span class="tdkp" @click="stockHandle('stock2')">{{num2}}</span></p>
          <p>提单处理：<span class="tdcl" @click="stockHandle('stock1')">{{num1}}</span></p>
        </div>
        <span class="out-jt"><i class="iconfont">&#xe7cf;</i></span>
        <div class="out-first">
          <p class="out-edit-box"><img src="@/assets/img/outhouse.png" /></p>
          <p class="out-title">物资出库</p>
          <p>物资不通过：<span class="tdkp" @click="stockHandle('stock4')">35</span></p>
          <p>出库处理：<span class="tdcl" @click="stockHandle('stock5')">{{num4}}</span></p>
        </div>
        <span class="out-jt"><i class="iconfont">&#xe7cf;</i></span>
        <div class="out-first">
          <p class="out-edit-box"><img src="@/assets/img/cmjs.png" /></p>
          <p class="out-title">出门结算</p>
          <p>未结算：<span class="tdkp" @click="stockHandle('stock8')">35</span></p>
        </div>
        <span class="out-jt"><i class="iconfont">&#xe7cf;</i></span>
        <div class="out-first">
          <p class="out-edit-box"><img src="@/assets/img/ckfh.png" /></p>
          <p class="out-title">出库复核</p>
          <p>待复核：<span class="tdkp" @click="stockHandle('stock9')">{{num9}}</span></p>
        </div>
        <span class="out-jt"><i class="iconfont">&#xe7cf;</i></span>
        <div class="out-start"></div>
      </div>
      <div class="out-house">
        <div class="out-start1"></div>
        <div class="bottom-item">
          <span><i class="iconfont icon-size">&#xe72a;</i></span>
          <div class="out-second">
            <img src="@/assets/img/kpsh.png" />
            <span class="out-title">开票审核</span>
            <span class="bottom-tdkp"  @click="stockHandle('stock3')">{{num3}}</span>
          </div>
        </div>
        <div class="bottom-item">
          <span><i class="iconfont icon-size">&#xe72a;</i></span>
          <div class="out-second">
            <img src="@/assets/img/cgsq.png" />
            <span class="out-title">冲关授权</span>
            <span class="bottom-tdkp" @click="stockHandle('stock6')">35</span>
          </div>
        </div>
        <div class="bottom-item">
          <span><i class="iconfont icon-size">&#xe72a;</i></span>
          <div class="out-second">
            <img src="@/assets/img/cgsq.png" />
            <span class="out-title">出门放行</span>
            <span class="bottom-tdkp" @click="stockHandle('stock7')">35</span>
          </div>
        </div>
      </div>
    </el-row>
    <el-row slot="status">
      <div class="out-house">
        <div class="out-three" @click="handleList({path:'/goods/out/stock',name:'提单查看'})">
          <img src="@/assets/img/tdck.png" />
          <span class="out-title">提单查看</span>
        </div>
        <div class="out-three" @click="handleList({path:'/goods/out/outBill',name:'出库单列表'})">
          <img src="@/assets/img/ckd.png" />
          <span class="out-title">出库单</span>
        </div>
        <div class="out-three" @click="handleList({path:'/goods/out/outPass',name:'冲关授权查看'})">
          <img src="@/assets/img/cgsqck.png" />
          <span class="out-title">冲关授权查看</span>
        </div>
      </div>
      <el-row class="title-header" style="margin-top:30px">
          <br/>
          <div class="line"></div>
          <h3>{{statusTitle}}</h3>
      </el-row>
    </el-row>
    <el-row>
      <stock-template v-if="statusShow.stock1" ref="stock1" @subStatus="subStatusParent" @load="loadData"></stock-template>
      <stock-template-two v-if="statusShow.stock2" ref="stock2" @subStatus="subStatusParent" @load="loadData"></stock-template-two>
      <audit-template v-if="statusShow.stock3" ref="stock3" @subStatus="subStatusParent" @load="loadData"></audit-template>
      <material-template v-if="statusShow.stock4" ref="stock4" @subStatus="subStatusParent" @load="loadData"></material-template>
      <material-template-two v-if="statusShow.stock5" ref="stock5" @subStatus="subStatusParent" @load="loadData"></material-template-two>
      <pass-template v-if="statusShow.stock6" ref="stock6" @subStatus="subStatusParent" @load="loadData"></pass-template>
      <out-pass-template v-if="statusShow.stock7" ref="stock7" @subStatus="subStatusParent" @load="loadData"></out-pass-template>
      <balance-template v-if="statusShow.stock8" ref="stock8" @subStatus="subStatusParent" @load="loadData"></balance-template>
      <pre-audit-template v-if="statusShow.stock9" ref="stock9" @subStatus="subStatusParent" @load="loadData"></pre-audit-template>
    </el-row>
    <component :is="component"
               ref="component"
               @resdata="getResData"
               @load="loadData"
               @clear="component=''"></component>
    <el-dialog title="新增提单" :visible.sync="addDialogTableVisible" width="720px">
      <el-form :model="form">
        <el-form-item label="活动名称" label-width="80">
          <el-radio v-model="cpOrYcl" label="0">原材料提单新增</el-radio>
          <el-radio v-model="cpOrYcl" label="1">成品提单新增</el-radio>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="addDialogTableVisible = false">取 消</el-button>
        <el-button type="primary" @click="handleFormOpen">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import { getCargoNameList, getPiecesCargo } from '@/api/things/accountPageList'
import autoSearchDic from '@/components/autocomplete/autoSearchDic'
import autoSearchName from '@/components/autocomplete/autoSearchName' //货主组件
import addBillForm from './out/addBillForm'
import addCpBillForm from './out/addCpBillForm'
import billModel from './out/billModel'
import viewStockDetail from './out/viewStockDetail'
import stockTemplate from './out/stockTemplate'
import stockTemplateTwo from './out/stockTemplateTwo'
import auditTemplate from './out/auditTemplate'
import materialTemplate from './out/materialTemplate'
import materialTemplateTwo from './out/materialTemplateTwo'
import passTemplate from './out/passTemplate'
import outPassTemplate from './out/outPassTemplate'
import balanceTemplate from './out/balanceTemplate'
import preAuditTemplate from './out/preAuditTemplate'
import {
    addOutStockEntrust,
    getOutStockEntrust,
    deleteStockEntrust,
    acceptStockEntrust,
    voidStockEntrust,
    changeStockEntrust,
    getpcOutStockTask,
    getInventoryType
} from '@/api/things/out'
export default {
  name: 'outHousePageList',
  components: {
    billModel,
    autoSearchDic,
    autoSearchName,
    addBillForm,
    addCpBillForm,
    viewStockDetail,
    stockTemplate,
    stockTemplateTwo,
    auditTemplate,
    materialTemplate,
    materialTemplateTwo,
    passTemplate,
    outPassTemplate,
    balanceTemplate,
    preAuditTemplate
  },
  data() {
    return {
      form: this.clearForm(),
      component: '',
      subStatus: 'NOACCEPT,NOOPERATE,OPERATING',
      warehouseList: [], //仓库
      cargoNameList: [], //货名
      statusShow: {
        stock1: true,
        stock2: false,
        stock3: false,
        stock4: false,
        stock5: false,
        stock6: false,
        stock7: false,
        stock8: false,
        stock9: false,
      },
      statusTitle: '提单处理页面',
      addDialogTableVisible: false,
      cpOrYcl: '0',
      num1: 0,
      num2: 0,
      num3: 0,
      num9: 0,
      num4: 0
    }
  },
  mounted() {
    getInventoryType('1').then(res => {
      console.log(res)
    })
    //获取货名
    getCargoNameList(this.$store.state.user.currentUser.org.id).then(res => {
      this.cargoNameList = res.data.aaData
    })
    this.getCountData()
    this.loadData()
  },
  methods: {
    loadData() {
      this.$refs.stock1.subStatus = this.subStatus
      this.$refs.stock1.loadData()
    },
    clearForm() {
      return {
        orgId: '',
        orgId:
          this.$store.state.user.currentUser.org &&
          this.$store.state.user.currentUser.org.id,
        orgName:
          this.$store.state.user.currentUser.org &&
          this.$store.state.user.currentUser.org.name
      }
    },
    stockHandle(num) {
      let that = this;
      that.objHandle(num, function() {    
        switch(num)
        {
        case 'stock2':
          that.statusTitle = '提单处理页面'
          that.$refs.stock2.subStatus = 'EXPIRED'
          break;
        case 'stock1':
          that.statusTitle = '提单处理页面'
          that.$refs.stock1.subStatus = 'NOACCEPT,NOOPERATE,OPERATING'
          break;
        case 'stock3':
          that.statusTitle = '开票审核页面'
          that.$refs[num].subStatus = 'B'
          break;
        case 'stock4':
          that.statusTitle = '出库单修改处理页面'
          that.$refs[num].subStatus = 'OPERATED'
          break;
        case 'stock5':
          that.statusTitle = '物资出库处理页面'
          that.$refs[num].subStatus = 'NOOPERATE,OPERATING'
          break;
        case 'stock7':
          that.statusTitle = '出库放行处理页面'
          that.$refs[num].subStatus = 'OPERATED'
          break;
        case 'stock8':
          that.statusTitle = '出门结算处理页面'
          that.$refs[num].subStatus = 'OPERATED'
          break;
        case 'stock9':
          that.statusTitle = '出库复核处理页面'
          that.$refs[num].subStatus = 'OPERATING'
          break;
        default:
          break;
        }
        that.$refs[num].loadData()
      })
    },
    objHandle(num,cb) {
      let obj = this.statusShow;
      Object.keys(obj).forEach(key => {
        obj[key] = false
        if(key = num) {
          obj[key] = true
        }else{
          obj[key] = false
        }
      });
      this.$nextTick(() => {
        this.statusShow = obj
        cb()
      })
    },
    handleFormOpen() {
      this.addDialogTableVisible = false
      if(this.cpOrYcl == 0) {
        this.component = 'addBillForm'
      }else{
        this.component = 'addCpBillForm'
      }
      this.$nextTick(() => {
        this.$refs.component.dialogForm = true
      })
    },
    // 列表快速查询
    handleList(url) {
      this.$store.commit('ADD_CACHED_VIEWS', url)
      this.$router.push(url.path)
    },
    getResData(val) {
      console.log(val)
      if(val) {
        this.getCountData()
      }
    },
    subStatusParent(val) {
      if (val) {
        this.getCountData()
      }
    },
    getCountData() {
      //提单列表
      this.loadData()
      getOutStockEntrust().then(res => {
        let datas = res.data.aaData
        var num = 0,num2 = 0,num3= 0,num9=0
        for (var i=0;i<datas.length;i++) {
          if(datas[i].status == 'NOACCEPT' || datas[i].status == 'NOOPERATE' || datas[i].status == 'OPERATING') {
            num ++
          }
          if(datas[i].status == 'EXPIRED') {
            num2 ++
          }
          if( datas[i].auditStatus == 'B' && datas[i].ifAudit == true) {
            num3 ++
          }
          if(datas[i].status == 'OPERATING') {
            num9 ++
          }
        }
        this.num1 = num
        this.num2 = num2
        this.num3 = num3
        this.num9 = num9
      })
      //出库单任务列表
      getpcOutStockTask().then(res => {
        let datas = res.data.aaData
        var num4 = 0,num5 = 0
        for (var i=0;i<datas.length;i++) {
          if(datas[i].status == 'NOOPERATE' || datas[i].status == 'OPERATING') {
            num4 ++
          }
        }
        this.num4 = num4
      })
    }
  }
}
</script>
<style scoped>
@font-face {
  font-family: 'iconfont'; /* project id 1072096 */
  src: url('//at.alicdn.com/t/font_1072096_e2pibn4rav6.eot');
  src: url('//at.alicdn.com/t/font_1072096_e2pibn4rav6.eot?#iefix')
      format('embedded-opentype'),
    url('//at.alicdn.com/t/font_1072096_e2pibn4rav6.woff2') format('woff2'),
    url('//at.alicdn.com/t/font_1072096_e2pibn4rav6.woff') format('woff'),
    url('//at.alicdn.com/t/font_1072096_e2pibn4rav6.ttf') format('truetype'),
    url('//at.alicdn.com/t/font_1072096_e2pibn4rav6.svg#iconfont') format('svg');
}
.iconfont {
  font-family: 'iconfont' !important;
  font-size: 16px;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -webkit-text-stroke-width: 0.2px;
  -moz-osx-font-smoothing: grayscale;
}
.title-header {
  width: 90%;
  display: flex;
  height: 30px;
  margin-bottom: 20px;
}
h3 {
  margin-left: 10px;
}
.line {
  border-left: solid 5px #00a1ff;
  height: 18px;
  margin-top: 5px;
}
.out-house-slow {
  border: 1px solid #e3e3e3;
  padding: 20px;
  margin-bottom: 10px;
}
.out-house {
  display: flex;
  align-items: center;
}
.legend {
  display: inline-block;
  width: 32px;
  height: 22px;
  border-radius: 50%;
  vertical-align: middle;
  margin-right: 10px;
}
.legend1 {
  background-color: red;
}
.legend2 {
  background-color: green;
}
.out-start {
  display: inline-block;
  width: 20px;
  height: 20px;
  background-color: #3266cc;
  transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  /* Internet Explorer */
  -moz-transform: rotate(45deg);
  /* Firefox */
  -webkit-transform: rotate(45deg);
  /* Safari 和 Chrome */
  -o-transform: rotate(45deg);
  /* Opera */
}
.out-start1 {
  width: 100px;
}
.out-jiantou {
  display: inline-block;
  width: 50px;
  height: 10px;
  background-color: #3266cc;
}
.out-first {
  width: 114px;
  height: 120px;
  border: 2px solid #3a79d8;
  padding: 10px;
  border-radius: 6px;
  position: relative;
}
.out-second {
  width: 114px;
  padding: 10px;
  border-radius: 6px;
  position: relative;
  border: 2px solid #3a79d8;
  text-align: center;
}
.out-three {
  width: 180px;
  padding: 10px;
  margin-right: 10px;
  border-radius: 6px;
  box-shadow: 0px 0px 9px #ddd;
  text-align: center;
}
.out-second img,
.out-three img {
  vertical-align: middle;
}
.out-add {
  position: absolute;
  top: -8px;
  right: -4px;
}
.out-add i {
  font-size: 30px;
  color: #3a79d8;
}
.out-edit {
  text-align: center;
  font-size: 30px;
  color: #3a79d8;
}
.out-edit-box {
  text-align: center;
}
.out-edit-box img {
  height: 37px;
}
.out-jt {
  margin: 0 20px;
}
.out-jt i {
  font-size: 30px;
}
.out-title {
  text-align: center;
  font-size: 18px;
  font-weight: 600;
  margin-bottom: 10px;
}
.tdkp {
  color: red;
  font-weight: 600;
  cursor: pointer;
}
.tdcl {
  color: #409cff;
  font-weight: 600;
  cursor: pointer;
}
.icon-size {
  font-size: 40px;
}
.bottom-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-right: 65px;
}
.bottom-tdkp {
  position: absolute;
  top: -6px;
  right: -6px;
  padding: 0px 6px;
  background: red;
  border-radius: 8px;
  color: #fff;
  line-height: 16px;
}
</style>